<template>
  <div class="page-container">
    <ex_header_spiler :title="$t('label_base_info')" />
    <ex_super_desc :model="baseOption" :data="form" size="default" direction="vertical" :attrs="$defaultDetailDescAttrs" border
      class="desc_flex_row" labelClassName="flex_cell" contentClassName="flex_cell"></ex_super_desc>
    <ex_header_spiler :title="$t('label_sku_info')"></ex_header_spiler>
    <ex_super_table ref="table" :model="buildTableModel" :data="form.omsPurchaseOrderDetailList"
      class="w_fill purchaseOrderCreationTable">
    </ex_super_table>

    <!-- 查看参考价 -->
    <history_purchase_order_dialog ref="historyPurchaseOrderDialog" :dialogData="form" />
  </div>
</template>

<script>
const default_obj = {
  omsPurchaseOrderDetailList: []
}
import role_system_mixin from '@/mixin/role_system_mixin';
import router_params from '@/mixin/router_params';
import history_purchase_order_dialog from "@/page/oms/purchase/dialog/history_purchase_order_dialog.vue"

export default {
  title: 'purchase_order_detail',
  mixins: [router_params, role_system_mixin],
  components: {
    history_purchase_order_dialog
  },
  props: {
  },
  data() {
    return {
      loading: false,
      form: _.cloneDeep(default_obj),
      baseOption: [
        {
          key: 'customerName',
          label: "label_customer",
        },
        {
          key: 'supplierName',
          label: "label_supplier",
        },
        {
          key: 'purchaser',
          label: "label_purchase_buyer",
        },
        {
          key: 'apportionFreight',
          label: "label_purchase_apportioned_freight",
          formatter: (r, c, v, i) =>
            this.$enumShow(v, "PurchaseApportionFreightEnum"),
        },
        {
          key: "warehouseName",
          label: "label_purchase_receiving_warehouse",
        },

        {
          key: 'purchaseType',
          label: "label_purchase_purchase_type",
          formatter: (r, c, v, i) => this.$enumShow(v, "PurchasePlatformTypeEnum"),
        },
        {
          key: "orderNo",
          label: "label_waybill_code",
          render: (h, { data }) => {
            let divStr = ''
            if (data.omsPurchaseWaybillList) {
              divStr = data.omsPurchaseWaybillList.map(item => {
                return <div>{this.$enumShow(item.logisticsSupplier, "PurchaseOrderLogisticsEnum")}: {item.trackingNumber}</div>
              })
            }
            return (
              <div>
                <div>
                  {data.orderNo ? `${data.purchaseSource}:${data.orderNo}` : ''}
                </div>
                <div>
                  {divStr}
                </div>
              </div>
            );
          },
        },
        {
          key: "platformOrderNo",
          label: "label_platform_order_1688",
        },
        {
          key: 'purchaseFreight',
          label: "label_purchase_freight",
          formatter: (r, c, v, i) => {
            return v ? v : '-'
          },
        },
        {
          key: 'otherCost',
          label: "label_purchase_other_charges",
          formatter: (r, c, v, i) => {
            return v ? v : '-'
          },
        },
        {
          key: 'predictDay',
          label: "label_expected_arrival",
          formatter: (r, c, v, i) => {
            return v ? this.$t('label_day_within', [v]) : '-'
          },
        },
        {
          key: 'skuCategoryCount',
          label: "label_sku_kind",
          formatter: (r, c, v, i) => {
            return v ? v : '-'
          },
        },
        {
          key: 'skuCount',
          label: "label_quantity_commodity",
          formatter: (r, c, v, i) => {
            return v ? v : '-'
          },
        },
        {
          key: 'skuTotalAmount',
          label: "label_purchase_total_purchase",
          formatter: (r, c, v, i) => {
            return v ? v : '-'
          },
        },
        {
          key: 'totalAmount',
          label: "label_total_payable",
          formatter: (r, c, v, i) => {
            return v ? v : '-'
          },
        },
        {
          key: 'remark',
          label: "label_purchase_remark",
          formatter: (r, c, v, i) => {
            return v ? v : '-'
          },
        },
        {
          key: 'cancelRemark',
          label: "label_purchase_cancel_remark",
          formatter: (r, c, v, i) => {
            return v ? v : '-'
          },
        },
      ]
    }
  },
  watch: {
  },
  computed: {
    buildTableModel() {
      return [
        {
          key: "skuName",
          label: "label_sku_info",
        },
        {
          key: "skuPrice",
          label: "label_reference_price",
        },
        {
          key: "purchaseQty",
          slot_header: "purchaseQtyHeader",
          label: "label_count",
        },
        {
          key: "purchasePrice",
          label: "label_unit_price",
        },
        {
          key: "historyPurchasePrice",
          label: "label_historical_purchase_price",
          formatter: (r, c, v, i) => (v ? v : "-"),
          render: (h, { row, column, index }) => {
            const showHistory = () => {
              this.$refs.historyPurchaseOrderDialog.show(row)
            }
            let divStr = ''
            if (row['historyPurchasePrice']) {
              divStr = <div onClick={showHistory} class="cubs">{row['historyPurchasePrice']}&nbsp;<i class="el-icon-s-data"></i></div>
            }
            return (
              divStr
            );
          }
        },
        {
          key: "purchaseTotalPrice",
          label: "label_purchase_subtotal",
          formatter: (r, c, v, i) => (v ? v : "-"),
        },
        { key: 'currencyCode', label: 'label_currency_kind', formatter: (r, c, v, i) => this.$enumShow(v, "CurrencyTypeEnum"), 'show-overflow-tooltip': true, },
      ]
    },
  },
  created() {

  },
  mounted() {

  },
  methods: {
    fixTabLabel() {
      this.$emit("tagModifyLabel", { _key: 'label_name_code', i18n: { name: true }, name: "采购订单详情", code: this.form.code })
    },
    init_order(id) {
      this.loading = true
      let data = {
        id
      }
      this.$ajax({
        url: "/oms-api/purchase/OmsPurchaseOrderRpc/selectDetail.json",
        method: 'post',
        data,
        success: (res) => {
          if (!res.data) return this.$message.error(this.$tt("label_data_loss"))
          this.form = res.data
          this.loading = false
          this.fixTabLabel()
        },

      })
    },
    init_data_default(params) {
      this.init_order(params.id)
    },

  },
  destroyed() {

  }
};
</script>

<style lang="less" scoped>
/deep/.cubs {
  color: #2ea7e0;
  cursor: pointer;
}
</style>
